
import * as React from'react';
import "./ResultsTable.css";
import Table from 'react-bootstrap/Table';

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';

type RowData = {
  name: string;
  date: String;
  owner: string;
  status: string;
};

const defaultData: RowData[] = [
  {
    "name": "case1",
    "date": "2024/01/01",
    "owner": "Tom",
    "status": "closed"
},
{
    "name": "case2",
    "date": "2024/02/01",
    "owner": "jerry",
    "status": "canceled",
  }
];

const columnHelper = createColumnHelper<RowData>()

const columns = [
  columnHelper.accessor('name', {
    cell: info => info.getValue(),
    header: 'Name',
    footer: 'Name'
  }),
  columnHelper.accessor(row => row.date, {
    id: 'date',
    cell: info => info.getValue(),
    header: 'Date',
    footer: info => info.column.id,
    }),
  columnHelper.accessor('owner', {
    cell: info => info.getValue(),
    header: 'Owner',
    footer: info => info.column.id,
  }),
  columnHelper.accessor('status', {
    cell: info => info.getValue(),
    header: 'Status',
    footer: info => info.column.id,
  }),
];

function ResultsTable() {
  const [data, _setData] = React.useState(() => [...defaultData])
  const rerender = React.useReducer(() => ({}), {})[1]

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
        <tfoot>
          {table.getFooterGroups().map(footerGroup => (
            <tr key={footerGroup.id}>
              {footerGroup.headers.map(header => (
                <th key={header.id}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </tfoot>
      </Table>
      <div />
    </div>
  )
}

export default ResultsTable;